<template>
  <div class="page">
    <div v-if="progresses.length > 0">
      <div v-for="(n, i) in progresses" :key="i" class="weui-cells weui-cells_after-title mgb-s v-mdl item-progress">
        <navigator open-type="reLaunch" :url="'/pages/progress/main?progressId=' + n.id" class="weui-cell weui-cell_access pdv" hover-class="weui-cell_active">
          <div class="weui-cell__hd">
            <div style="width: 50px;padding-right: 10px;">
              <avatar v-if="n.user.avatarUrl" :src="n.user.avatarUrl"></avatar>
            </div>
          </div>
          <div class="weui-cell__bd">
            {{n.memberName}}
          </div>
          <div class="weui-cell__ft weui-cell__ft_in-access avatars">
            <i class="fi fs-1" :class="{'icon-heart': n.liked, 'c-red': n.liked, 'icon-heart1': !n.liked}"></i>
            {{n.likeCount}}
          </div>
        </navigator>
      </div>
    </div>
    <div v-else class="ta-c pd-xxl c-gray">暂时还没有同学提交作业哦！</div>
    <page-common></page-common>
  </div>
</template>

<script>
import Avatar from '@/components/avatar'
import PageCommon from '@/components/page-common'
import { mapGetters, mapActions } from 'vuex'
import DocumentPanel from '@/components/document-panel'
import base from '@/mixins/base'
import * as $group from '@/api/group'
import {getById} from '@/graphql/task'
import {keyBy} from '@/utils/helper'
export default {
  mixins: [base],
  components: {
    PageCommon,
    Avatar,
    DocumentPanel,
  },
  data () {
    return {
      members: []
    }
  },
  async onPullDownRefresh() {
    try {
      await this.fetchById(this.task.id)
      wx.stopPullDownRefresh()
    } catch (e) {
      this.$debug({err: e})
    }
  },
  computed: {
    progresses () {
      let t = []
      let kvMembers = keyBy(this.members, 'userId')
      this.task.progresses.forEach(n => {
        if (n.state === 'start') return
        n.memberName = n.user && n.user.id && kvMembers[n.user.id] ? kvMembers[n.user.id].name : ''
        t.push(n)
      })
      return t
    },
    ...mapGetters('task', [
      'task'
    ]),
    ...mapGetters([
      'loginer'
    ]),
  },
  onShareAppMessage() {
    return {
      title: this.task.document.name,
      path: '/pages/task-urge/main?taskId=' + this.task.id,
      imageUrl: ''
    }
  },
  methods: {
    ...mapActions('task', [
      'fetchById'
    ]),
    async loginBack () {
      try {
        let {taskId} = this.getParams()
        await this.fetchById(taskId)
        this.members = await $group.getMembersById(this.task.groupId)
      } catch (e) {
        this.$debug({err: e})
      }
    },
  },
}
</script>

<style scoped lang="less">
.item-progress {
  &.state-start {
    background-color: #EEE;
  }
}
</style>
